<template>
  <div class="mine">
      <div class="head">
        <div class="avatar"><img :src="obj.avatar" alt="" width="80px" height="80px" > </div>
      <div class="nickname">{{ obj.username }}</div>
      </div>
     <div class="head1">
        <div class="f1" @click="$router.push('/home/article/recommend')">
            <van-icon name="clock-o" size="30px" />
            <div>历史记录</div>
        </div>
        <div class="f2" @click="$router.push('/home/collect')">
            <van-icon name="bookmark-o" size="30px" />
           <div>我的收藏</div>
        </div>
        <div class="f3" @click="$router.push('/home/like')">
            <van-icon name="thumb-circle-o" size="30px" />
           <div>我的点赞</div>
        </div>
     </div>
        <div class="navbar">
              <div>推荐分享</div>
              <div class="right">&gt;</div>
        </div>
        <div class="navbar">
              <div>意见反馈</div>
              <div class="right">&gt;</div>
        </div>
        <div class="navbar">
              <div>关于我们</div>
              <div class="right">&gt;</div>
        </div>
        <div class="navbar" @click="logout">
              <div>退出登录</div>
              <div class="right">&gt;</div>
        </div>
       
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data(){
    return{
      token:localStorage.getItem('token'),
      obj:''

    }
  },
  async created(){
    // http://interview-api-t.itheima.net/h5/user/currentUser
    const res=await axios.get('http://interview-api-t.itheima.net/h5/user/currentUser',{
      headers:{
        Authorization:`Bearer ${this.token}`        
      }
    })
    // console.log(res)
    this.obj=res.data.data

  },
  methods:{
    async logout(){
      // localStorage.removeItem('token')
      await axios.get('http://interview-api-t.itheima.net/h5/user/logout',{
        headers:{
          Authorization:`Bearer ${this.token}`
        }
      })
      this.$router.push('/login')
      this.$toast.success('退出成功')
    }
  }

}
</script>

<style lang="less">
   .mine{
    width: 100%;
    height: 667px;
    background-color: #f5f5f5;
    // padding: 11px;
    .head{
      display: flex;
      padding: 11px;
      // margin-top: 11px;
      .avatar{
        width: 80px;
        height: 80px;
        background-color: #fff;
        border-radius: 40px;
        margin-right: 20px;
      }
      .nickname{
        display: flex;
        align-items: center;
      }

    }


    .head1{
      display: flex;
      margin-top: 20px;
      width: 350px;
      height: 86px;
      text-align: center;
      background-color: #fff;
      justify-content: center;
      align-items: center;
      justify-content: space-around;
      margin-bottom: 20px;
      margin-left: 11px;

      .f1{
         div{
          width: (350/3)px;
          // height: 86px;
         //  line-height: 80px;
          // background-color: skyblue;
         }
         
      }

    }


    .navbar{
      width: 330px;
      height: 32px;
      display: flex;
      justify-content: space-between;
      background-color: #fff;
      padding: 11px;
      align-items: center;
      border-radius: 6px;
      margin-left: 11px;

      .right{
        font-size: 18px;
      }

    }
    

   }
  

</style>